<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width:400px;height: 300px;border: solid 1px black;margin: 0 auto;}
    .box .btns{height: 30px;line-height: 30px;background: #ccc;display: flex;}
    .box .btns span{flex: 1;border-left:solid 1px #fff;border-right:solid 1px #fff;text-align: center;cursor: pointer;}
    .box .btns span.active{color: #fff;background: red;}
    .box .cont{width: 400px;height: 270px;display: none;}
    .box .cont1{background-color: pink;}
    .box .cont2{background-color: green;}
    .box .cont3{background-color: blue;}
    .box .cont4{background-color: yellow;}
  </style>
</head>
<body>
  <div class="box">
    <div class="btns">
      <span>电子</span>
      <span>户外</span>
      <span>零食</span>
      <span>衣服</span>
    </div>
    <div class="contBox">
      <div class="cont1 cont"></div>
      <div class="cont2 cont"></div>
      <div class="cont3 cont"></div>
      <div class="cont4 cont"></div>
    </div>
  </div>
</body>
<script>
  var btns = document.querySelectorAll(".btns span");
  var conts = document.querySelectorAll(".contBox .cont");

  var index = 0;
  btns[index].className = "active";
  conts[index].style.display = "block";

  for(var i=0;i<btns.length;i++){

    btns[i].index = i;

    btns[i].onclick = function(){
      btns[index].className = "";
      conts[index].style.display = "none";

      btns[this.index].className = "active";
      conts[this.index].style.display = "block";

      index = this.index;
    }
  }
</script>
</html>